<template>
  <div class="codesandbox w-full mb-6 mx-auto bg-black text-white text-3xl text-center flex items-center justify-center overflow-hidden rounded">
    <iframe v-if="isIntersecting && src" :src="src" title="CodeSandbox editor" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin" class="w-full overflow-hidden" />
    <span v-else>Loading Nuxt Sandbox...</span>
  </div>
</template>

<script>
import intersectingMixin from '~/mixins/intersecting.js'
export default {
  mixins: [intersectingMixin],
  props: {
    src: {
      type: String,
      required: true
    }
  }
}
</script>

<style scoped>
.codesandbox,
.codesandbox iframe {
  max-width: 1400px;
  height: 700px;
}
</style>
